<template>
  <div p-36rpx h-140rpx bg-white>
    <userModules :userInfo="userInfo" />
  </div>
  <div mt-20rpx>
    <nut-tabs background="#fff" v-model="categoryId" type="smile">
      <nut-tab-pane custom-class="custom-tabpane" :pane-key="item.categoryId"
        v-for="(item, index) in categoryData.params" :key="index" :title="item.name">
        <scroll-view :scrollTop="0" :style="{ height: 'calc(100vh - (260rpx + 44px + 46px))' }" :lower-threshold="100"
          @scrolltolower="reachBottom" scroll-y scroll-with-animation>
          <div flex flex-wrap v-if="item.goods.length">
            <div :style="'width: 50%'" bg-white v-for="(goods, i) in item.goods" :key="i">
              <twoRow type="point" @click.native="handleClickGoods(goods)" disabled :res="goods" ></twoRow>
            </div>
          </div>
          <empty mt-100rpx v-if="!item.goods.length" />
        </scroll-view>
      </nut-tab-pane>
    </nut-tabs>
  </div>
</template>

<script setup lang="ts">
import { getCategoryPointsGoodsDetail, getPointsCategory } from "@/api/promotion";
import empty from '@/components/empty/index.vue';
import twoRow from '@/components/goods-list/2row.vue';
import userModules from '@/components/user/index-shop.vue';
import { useStore } from '@/store';
import { isLogin } from '@/utils/filters';
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app';
const userInfo = ref({})
const categoryId = ref<any>(0)
const categoryData = ref<any>({
  params: [
    {
      categoryId: 0,
      name: "全部",
      loadStatus: "more",
      goods: [],
      total: 0,
      params: {
        pageNumber: 1,
        pageSize: 5,
        pointsGoodsCategoryId: "",
      },
    },
  ],
  result: ""
})
const store = useStore()
const currentCategory = ref<any>('')
watch(() => categoryId.value, (id: any) => {
  currentCategory.value = categoryData.value.params.find((item: any) => item.categoryId == id)
  currentCategory.value.goods = []
  console.log(currentCategory.value)
  fetchCategoryDetail(id)
})


function handleClickGoods(goods: any) {
  uni.navigateTo({ url: '/pages/promotions/point/detail?id=' + goods.id })
}

async function init() {
  // 判断当前用户是否登录
  if (isLogin("auth")) {
    const user = await store.fetchUserInfo()
    if (user.data.success) {
      userInfo.value = user.data.result
      console.log('store-point',userInfo.value)
    }

  } else {
    userInfo.value = {}
  }
  fetchCategory()
}

// 触底加载
function reachBottom() {
  const current = currentCategory.value
  console.log(current)
  if (current.params.pageSize * current.params.pageNumber < current.total) {
    current.params.pageNumber++
    fetchCategoryDetail(categoryId.value)
  }
}
async function fetchCategory() {
  uni.stopPullDownRefresh();
  const response = await getPointsCategory()
  if (response.data.success) {
    const nav = response.data.result.records
    if (nav.length == 0) return

    nav.forEach((item: any) => {
      categoryData.value.params.push({
        categoryId: item.id,
        goods: [],
        loadStatus: "more",
        name: item.name,
        params: {
          pageNumber: 1,
          pageSize: 5,
          pointsGoodsCategoryId: item.id,
        },
      });
    });
    fetchCategoryDetail("0")
    currentCategory.value = categoryData.value.params[0]
  }
}

async function fetchCategoryDetail(id: string) {
  let submit
  let current
  if (id != "0") {
    current = currentCategory.value
    submit = {
      ...current.params,
      'pointsGoodsCategoryId': categoryId.value,
    }
  } else {
    current = categoryData.value.params[0]
    submit = {
      ...current.params
    }
  }

  const res = await getCategoryPointsGoodsDetail(submit)
  if (res.data.success) {
    current.goods.push(...res.data.result.records)
    current.total = res.data.result.total
  }
}
function reset() {
  categoryData.value.params = [
    {
      categoryId: 0,
      name: "全部",
      loadStatus: "more",
      goods: [],
      params: {
        pageNumber: 1,
        pageSize: 5,
        pointsGoodsCategoryId: "",
      },
    },
  ]
}

onPullDownRefresh(() => {
  reset()
  init()
})


onShow(async () => {
  reset()
  init()
})
</script>

<style scoped lang="scss">
.custom-tabpane-point {
  background: #fff !important;
}
</style>
